<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
</head>
<body>
    <div id="root">
        <button @click="fn" ref="btn">{{count}}</button>
        <child></child>
    </div>
</body>
<script>

	new Vue({
		el:"#root",
        data:{
			count:1000
        },
        methods:{
			fn(){
				this.count+=1;
            }
        },
        components:{
		    Child:{
				template:(`
				    <h3>Child</h3>
				`),
                beforeCreate(){
					console.log("4-beforeCreate")
                },
                created(){
					console.log("5-created")
                },
                beforeMount(){
					console.log("6-beforeMount")
                },
                mounted(){
					console.log("7-mounted")
                }
            }
        },
        // 挂载阶段的钩子函数在整个生命周期当中只会运行一次。
        beforeCreate(){
			// Vue.prototype.$bus = new Vue();
			// Vue.prototype.$axios = axios;
			console.group("**************1- beforeCreate实例创建前执行**********************************");
			console.log("count",this.count);// undefined
			console.log("fn",this.fn);// undefined
			console.log("ref",this.$refs.btn);// undefined
			console.log("document",document.querySelector("button").innerHTML);// {{count}}
			console.groupEnd();
        },
        created(){
			this.count = 90000;
			console.group("**************2- created实例创建完成**********************************");
			console.log("count",this.count);// 1000
			console.log("fn",this.fn);// function fn(){}
			console.log("ref",this.$refs.btn);// undefined
			console.log("document",document.querySelector("button").innerHTML);// {{count}}
			console.log(this.$el)
			console.groupEnd();
        },
        beforeMount(){
			console.group("**************3- beforeMount挂载前**********************************");
			console.log("count",this.count);// 1000
			console.log("fn",this.fn);// function fn(){}
			console.log("ref",this.$refs.btn);// undefined
			console.log("document",document.querySelector("button").innerHTML);// {{count}}
			console.log(this.$el)
			console.groupEnd();
        },
        mounted(){
			// 发送AJAX请求
			console.group("**************8- mounted**********************************");
			console.log("count",this.count);// 1000
			console.log("fn",this.fn);// function fn(){}
			console.log("ref",this.$refs.btn);// undefined
			console.log("document",document.querySelector("button").innerHTML);// {{count}}
			console.log(this.$el)
			console.groupEnd();
        }
	})
</script>
</html>